<template>
    <div class="detail">
        <van-nav-bar class="detail-nav" title="商品详细" left-text="返回" left-arrow @click-left="goback" fixed />
        <div class="detail-bg" v-if="detailDate.length>0">
            <img class="detail-bg-img" :src="detailDate[0] ? detailDate[0].small_img : '' " alt="..">
            <div class="detail-goodname">
                <div class="detail-goodname-txt">
                    {{detailDate[0] ? detailDate[0].name : '' }}
                </div>
                <div class="detail-goodname-blur"></div>
            </div>
            <div class="bg-cardhead"></div>
        </div>
        <div class="detail-content " v-if="detailDate.length>0">
            <div class="detail-choose" v-if="detailDate[0].tem.length>0">
                <span class="detail-choose-title">{{detailDate[0].tem_desc}}</span>
                <van-button round type="info" color="#ebebeb" @click="toggleChoose('tem',index)"
                    class="detail-choose-btn" :class="{'active':temflg === index}"
                    v-for="(item,index) in detailDate[0].tem.split('/')" :key="index">{{item}}</van-button>
            </div>
            <div class="detail-choose" v-if="detailDate[0].sugar.length>0">
                <span class="detail-choose-title">{{detailDate[0].sugar_desc}}</span>
                <!-- <van-button round type="info" color="#ebebeb" @click="" class="detail-choose-btn">全糖</van-button> -->
                <van-button round type="info" color="#ebebeb" @click="toggleChoose('sugar',index)"
                    class="detail-choose-btn" :class="{'active':sugarflg === index}"
                    v-for="(item,index) in detailDate[0].sugar.split('/')" :key="index">{{item}}</van-button>
            </div>
            <div class="detail-choose" v-if="detailDate[0].cream.length>0">
                <span class="detail-choose-title">{{detailDate[0].cream_desc}}</span>
                <!-- <van-button round type="info" color="#ebebeb" @click="" class="detail-choose-btn">全糖</van-button> -->
                <van-button round type="info" color="#ebebeb" @click="toggleChoose('cream',index)"
                    class="detail-choose-btn" :class="{'active':creamflg === index}"
                    v-for="(item,index) in detailDate[0].cream.split('/')" :key="index">{{item}}</van-button>
            </div>
            <hr>
            <div class="describe">
                <p class="describe-title">
                    商品描述:
                </p>
                <!-- {{detailDate[0].desc}} -->
                <p v-for="(txt,index) in detailDate[0].desc.split('\n')" :key="index">{{index+1}}.{{txt}}</p>
            </div>
            <hr>
            <div class="goodadd">
                <span>
                    ￥{{detailDate[0] ? detailDate[0].price : ''}}
                </span>
                <van-stepper v-model="value" theme="round" button-size="22" disable-input />
            </div>
        </div>
        <van-goods-action class="goods-action">
            <van-goods-action-icon icon="goods-collect-o" dot text="购物袋" @click="goShopbag" />
            <van-goods-action-icon :icon="islike? 'like' : 'like-o'" :text="islike? '已收藏':'收藏'" @click="likehandle" />
            <van-goods-action-button color="#6a91ec" type="warning" text="加入购物袋" @click="shopBaghandle" />
            <van-goods-action-button color="#0c34ba" type="danger" text="立即购买" @click="submitNow" />
        </van-goods-action>
    </div>
</template>
<script>
    import '../assets/scss/Detail.scss'

    export default {
        name: 'Detail',
        data() {
            return {
                pid: this.$route.params.pid,
                value: 1,
                detailDate: [],
                sugarflg: 0,
                temflg: 0,
                creamflg: 0,
                islike: false,
                sid: '',
            }
        },
        created() {
            this.getDetailData();
        },
        methods: {
            // 调试测试
            tiaosi() {
                console.log('调试1', this.$route.params.pid);
                console.log('调试2', this.detailDate);
            },
            // 返回
            goback() {
                // 1.方法一
                // this.$router.push({
                //     name: 'Home'
                // });
                // 2.方法二
                this.$router.go(-1);
            },
            // 跳转购物袋
            goShopbag() {
                this.isLogin();
                return this.$router.push({
                    name: 'Shopbag'
                });
            },
            // 判断是否登录
            isLogin() {
                // 判断是否登录
                if (!localStorage.getItem('__tk')) {
                    this.$toast('请登录');
                    return this.$router.push({
                        name: 'Login'
                    });
                }
            },
            //获取详细页面数据
            getDetailData() {
                this.$toast.loading({
                    message: "加载中...",
                    forbidClick: true,
                    duration: 0,
                });

                //发起详细商品请求
                this.axios({
                        //请求类型
                        method: "GET",
                        //请求路径
                        url: "/productDetail",

                        //GET请求参数, object
                        params: {
                            appkey: this.appkey,
                            pid: this.$route.params.pid
                        },
                    })
                    .then((result) => {
                        this.$toast.clear();

                        console.log("result ==> ", result);
                        // 成功
                        if (result.data.code === 600) {
                            this.detailDate = result.data.result;
                        }
                    })
                    .catch((err) => {
                        this.$toast.clear();

                        console.log("err ==> ", err);
                    });

                // 判断是否登录
                // 查看商品是否被收藏
                if (localStorage.getItem('__tk')) {
                    // 发起收藏判断请求
                    this.axios({
                            //请求类型
                            method: "GET",
                            //请求路径
                            url: "/findlike",

                            //GET请求参数, object
                            params: {
                                appkey: this.appkey,
                                pid: this.$route.params.pid,
                                tokenString: localStorage.getItem('__tk')
                            },
                        })
                        .then((result) => {
                            this.$toast.clear();

                            // 成功
                            console.log("findlike result ==> ", result);
                            if (result.data.code === 1000) {

                                this.islike = result.data.result.length;
                            }
                        })
                        .catch((err) => {
                            this.$toast.clear();

                            console.log("err ==> ", err);
                        });
                }

            },
            // 按钮切换味道
            toggleChoose(type, index) {
                if (type === 'sugar') {
                    this.sugarflg = index;
                }
                if (type === 'tem') {
                    this.temflg = index;
                }
                if (type === 'cream') {
                    this.creamflg = index;
                }
            },
            // 收藏处理
            likehandle() {
                this.isLogin();
                // 判断请求
                let url = this.islike ? '/notlike' : '/like';
                // 发起收藏判断请求
                this.axios({
                        //请求类型
                        method: "POST",
                        //请求路径
                        url,

                        //GET请求参数, object
                        data: {
                            appkey: this.appkey,
                            pid: this.$route.params.pid,
                            tokenString: localStorage.getItem('__tk')
                        },
                    })
                    .then((result) => {
                        this.$toast.clear();
                        console.log("likehandle result ==> ", result);
                        if (result.data.code === 800 || result.data.code === 900) {
                            this.islike = (result.data.msg === '已收藏');
                        }
                        // 成功
                    })
                    .catch((err) => {
                        this.$toast.clear();
                        console.log("err ==> ", err);
                    });

            },
            // 购物车处理
            shopBaghandle(callback) {
                // 判断是否登录
                this.isLogin();
                // 发起收藏判断请求

                let rulesugar = this.detailDate[0].sugar.split('/')[this.sugarflg].length ?
                    this.detailDate[0].sugar.split('/')[this.sugarflg] + '/' : '';
                let ruletem = this.detailDate[0].tem.split('/')[this.temflg].length ?
                    this.detailDate[0].tem.split('/')[this.temflg] + '/' : '';
                let rulecream = this.detailDate[0].cream.split('/')[this.creamflg].length ?
                    this.detailDate[0].cream.split('/')[this.creamflg] : '';


                this.axios({
                        //请求类型
                        method: "POST",
                        //请求路径
                        url: '/addShopcart',

                        //GET请求参数, object
                        data: {
                            appkey: this.appkey,
                            pid: this.$route.params.pid,
                            tokenString: localStorage.getItem('__tk'),
                            count: this.value,
                            rule: rulesugar + ruletem + rulecream
                        },
                    })
                    .then((result) => {
                        this.$toast.clear();
                        console.log("shopbag result ==> ", result);
                        // 成功
                        if (result.data.code === 3000) {
                            this.$toast.success(result.data.msg);

                            this.sid = result.data.sid;
                            // 回调函数
                            if (callback) {
                                callback();
                            }

                        }
                    })
                    .catch((err) => {
                        this.$toast.clear();
                        console.log("err ==> ", err);
                    });

            },
            // 立即结算订单
            submitNow() {
                // 1.先加入购物车
                // 2.获取购物车sid
                this.shopBaghandle(() => {

                    console.log('sid>>>',this.sid);
                    let sids = [this.sid];
                    this.$router.push({
                        name: 'Submit',
                        params: {
                            sids
                        }
                    });

                });


            }

        },
        computed: {

        },
    }
</script>